import React,{Component} from 'react'
import {
    Modal,
    WhiteSpace,
    WingBlank,
    NavBar,
    Icon,
    Tabs,
    Toast,
    Flex,
    Button,
    Checkbox,
    ListView,
    SegmentedControl,
    Popup
} from 'antd-mobile';
import {connect} from "dva";
import {routerRedux} from "dva/router";
import SecKillItem from "./secKillItem";
import SecKillBottomBar from '../../components/NavBottomBar/secKillBottomBar';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import second_kill from '../../assets/svg/second_kill.svg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {seckill} from "./secKill.less";

class SecKill extends Component {

    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.secKillList = [];
        this.state = {
            orderEntities:[],
            selectedIndex: parseInt(this.props.match.params.data),
            pageNo: 1,
            dataSource: this.ds.cloneWithRows([]),
            hasMore: false,
            isLoading: false,
            isInit: true,
            dataLength: 0
        };
        this.curTime = '';
        this.showTime=true;
    }


    refreshList = ({pageNo, selectedIndex}) => {
        let type = null;
        let status = null;
        switch (selectedIndex) {
            case 0:
                type = 1;
                status="soldout";
                break;
            case 1:
                type = 2;
                status="ing";
                break;
            case 2:
                type = 3;
                status="start";
                break;
        }

        this.props.dispatch({type:"secKill/secKillListEFF",obj:{pageNo,status}}).then(result => {
            this.setState({
                isLoading: false
            });
            const {secKillList=[]} =this.props.secKill;
            console.log(secKillList)
            this.secKillList = secKillList;
            const data = secKillList || [];
            const pageSize = this.props.secKill.pageSize;
            const dataLength = data.length;
            let hasMore = true;
            if (dataLength < pageSize) {
                hasMore = false;
            }
            if (this.state.isInit) {
                this.secKillList = data;
            } else {
                this.secKillList = [...this.secKillList, ...data];
            }
            this.setState({
                hasMore,
                pageNo,
                dataSource: this.ds.cloneWithRows(this.secKillList),
                dataLength: data.length
            })
        })
    }
    componentDidMount(){
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }

    refresh = () => {
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }
    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return;
        }
        this.setState({
            isLoading: true,
            isInit: false
        });
        let pageNo = this.state.pageNo + 1;
        this.refreshList({
            pageNo,
            selectedIndex: this.state.selectedIndex,
        });
    }
    componentDidUpdate(prevProps, prevState) {
        // 当前url参数
        const type = parseInt(this.props.match.params.data);
        this.curTime="";
        // 如果变化参数
        if (type != this.state.selectedIndex) {
            this.setState({
                pageNo: 1,
                selectedIndex: type,
                isInit: true
            })
            this.refreshList({
                pageNo: 1,
                selectedIndex: type
            });

        }
    }
    render() {
        const {selectedIndex} = this.state;
        const footer = <div style={{padding: 30, textAlign: 'center', marginBottom: '.5rem'}}>
            {this.state.dataLength <= 0 ? <div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可抢的商品呦!</span></div> : this.state.isLoading ? '加载中...' : '加载完毕'}
        </div>;
           return  <div style={{height:"100%"}}>
               <Flex  direction="column"
                      className={seckill}
                      style={{height:"100%",position:"relative"}}
               >
                   <NavTopBar style={{ width:"100%", border:"none" }} title={<Icon style={{width:"1rem",height:"100%"}} type={second_kill.id}></Icon>} isBlack={1} jumpUrl={`/`} dispatch={this.props.dispatch} />
                   <SegmentedControl
                       className='seckill-header'
                       onChange={(e) => {
                           this.props.dispatch(routerRedux.replace({
                               pathname:`/secKill/${e.nativeEvent.selectedSegmentIndex}`
                           }));
                           document.getElementsByClassName("am-list-view-scrollview")[0].scrollTo(0,0);
                       }}
                       selectedIndex={selectedIndex}
                       values={['即将售空', '正在秒杀', '即将开始']}
                       style={{
                           height: '0.9rem',
                           width:"100%",
                           color:"#fff",
                           backgroundColor:"#333"
                       }}/>
                   <div className="wx-orderlist" style={{width:"100%",position:"absolute",top:"2rem",bottom:"0"}}>
                           <ListView
                               style={{
                                   height: "100%",
                                   overflow: 'scroll',
                               }}
                               pageSize={this.props.secKill.pageSize}
                               renderFooter={() => footer}
                               onEndReached={this.onEndReached}
                               onEndReachedThreshold={50}
                               dataSource={this.state.dataSource}
                               renderRow={(dataItem) => {
                                   console.log(dataItem.startTime,this.curTime)
                                   if (dataItem.startTime != this.curTime) {this.showTime = true;this.curTime = dataItem.startTime}
                                   else {this.showTime = false ;this.curTime = dataItem.startTime}
                                   this.curTime = dataItem.startTime
                                   return <SecKillItem
                                       dataItem={dataItem} nowTime={this.props.secKill.nowTime} refresh={this.refresh} showTime={this.showTime} selectedIndex={selectedIndex}>
                                   </SecKillItem>
                               }}/>
                   </div>
               </Flex>
               <SecKillBottomBar path={ "/secKill" }></SecKillBottomBar>
               </div>

    }
}

export default connect(({ secKill}) => ({ secKill }))(SecKill);